<template>
  <up-popup v-model:show="showPopup" round :lock-scroll="true" height="50%">
    <div class="up-cascader-box">
      <div class="up-cascader-operation-box">
        <div class="up-cascader-title">
          {{ title }}
        </div>
        <div class="up-cascader-closed">
          <img class="up-cascader-closed-icon" src="./assets/close.png" @click="changeShow" alt="closed-icon" srcset="">
        </div>
      </div>
      <div class="up-cascader-content-box">
        <div class="up-cascader-content-title-box">
          <span class="cascader-content-title" v-for="(item, index) in contentTitle" :key="index">
            {{ item }}
          </span>
        </div>
        <up-swipe ref="swipe" :is-touch="true" :is-tab="true" :show-indicators="false" :loop="false" :swipe-name="name">
          <swipe-item v-for="(item, index) in itemOptions" :key="index">
            <div v-for="(minItem, minIndex) in item" :key="minIndex" @click="selectItem(minItem.children, index, minItem.text)">
              {{ minItem.text }}
            </div>
          </swipe-item>
        </up-swipe>
        <!-- <up-tabs :tabs-name="name" :is-touch="true" ref="cascaderTabs">
          <tabs-item :title="'级联1'" :name="'0'" :pre-name="name">级联1</tabs-item>
          <tabs-item :title="'级联2'" :name="'1'" :pre-name="name">级联2</tabs-item>
          <tabs-item :title="'级联3'" :name="'2'" :pre-name="name">级联3</tabs-item>
          <tabs-item :title="'级联4'" :name="'3'" :pre-name="name">级联4</tabs-item>
        </up-tabs> -->
      </div>
    </div>
  </up-popup>
</template>

<script setup>
import UpPopup from '../up-popup/index.vue'
import UpSwipe from '../up-swipe/index.vue'
import SwipeItem from '../up-swipe/swipe-item.vue'
// import UpTabs from '../up-tabs/index.vue'
// import TabsItem from '../up-tabs/tabs-item.vue'
import { computed, defineEmits, defineProps, onBeforeMount, onMounted, ref, watch } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '请选择所在地区'
  },
  name: {
    type: String,
    default: 'cascader'
  },
  options: {
    type: Object,
    default: () => {
      return [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }]
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }]
        },
        {
          text: '广东省',
          value: '310000',
          children: [
            {
              text: '广州市',
              value: '320100',
              children: [
                {
                  text: '天河区',
                  value: '10000',
                  children: [
                    {
                      text: '长兴街道',
                      value: '0001',
                      children: [
                        { text: '岑村南街', value: '00001' },
                        { text: '岑村小学', value: '00002' }
                      ]
                    },
                    { text: '新塘街道', value: '0002' }
                  ]
                },
                { text: '黄浦区', value: '10001' },
                { text: '越秀区', value: '10002' }
              ]
            },
            { text: '深圳市', value: '320200' },
            { text: '佛山市', value: '320300' }
          ]
        }
      ]
    }
  }
})
const cascaderTabs = ref(null)
const swipe = ref(null)
const emit = defineEmits(['update:show'])
const itemOptions = ref([])
const contentTitle = ref([])
// 解决v-model嵌套使用props.show时报错
const showPopup = computed({
  get: () => props.show,
  set: (val) => {
    emit('update:show', val)
  }
})
const changeShow = () => {
  emit('update:show', false)
}

// 选择下一级
const selectItem = (value, index, text) => {
  console.log('index==========', index)
  console.log('itemOptions.value.length', itemOptions.value.length)
  // 有传值
  if (value) {
    // 尾部插入
    if (index === itemOptions.value.length - 1) {
      if (index > 0 && itemOptions.value[index]) {
        console.log('尾部替换')
        // itemOptions.value[index] = value
        itemOptions.value.push(value)
        contentTitle.value[index] = text
      } else {
        console.log('尾部插入')
        itemOptions.value.push(value)
        contentTitle.value.push(text)
      }
      console.log('contentTitle', value, contentTitle.value)
    } else { // 中间修改
      console.log('中间修改itemOptions.value.length', itemOptions.value.length)
      itemOptions.value.splice(index + 1)
      contentTitle.value.splice(index)
      itemOptions.value[index + 1] = value
      contentTitle.value[index] = text
      // if (index === 0) {
      //   itemOptions.value.splice(index + 1)
      //   contentTitle.value.splice(index)
      //   itemOptions.value[index + 1] = value
      //   contentTitle.value[index] = text
      // } else {
      //   itemOptions.value.splice(index)
      //   contentTitle.value.splice(index)
      //   itemOptions.value[index] = value
      //   contentTitle.value[index] = text
      // }
    }
    swipe.value.changeSwipeContent(parseInt(index))
  } else {
    console.log('没传值则删除当前往下的')
    itemOptions.value.splice(index + 1) // 没传值则删除当前往下的
    contentTitle.value.splice(index)
    contentTitle.value[index] = text
  }
}

// 监听是否打开
watch(() => props.show, (newVal, oldVal) => {
  if (newVal) {
    // cascaderTabs.value.changeTabs(0)
  }
})

onBeforeMount(() => {
  itemOptions.value.push(props.options)
  console.log(itemOptions.value)
})

onMounted(() => {
  // console.log('cascader props.name=======', props.name)
  // cascaderTabs.value.changeTabsLine()
})
</script>

<style>
.up-cascader-box {
  font-size: 14px;
}
.up-cascader-operation-box {
  width: 96%;
  margin: 10px 2%;
  height: 40px;
  display: flex;
  line-height: 40px;
}
.up-cascader-title {
  flex: 60%;
  font-size: 18px;
  font-weight: 600;
}
.up-cascader-closed {
  flex: 40%;
  text-align: right;
}
.up-cascader-closed-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.up-cascader-content-box {
  padding: 10px;
}
/* cha */
.cascader-content-title {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
}
</style>
